<template>
    <div>
        <Button type="primary"  @click="showModal = true"><Icon type="plus"></Icon> 新增 User</Button>
        <Modal v-model="showModal"
        title="add"
        @on-ok="save"
        @on-cancel="cancel">
            <Form ref="formItems" :model="formItems" :rules="formRules"  :label-width="120" inline>

                <Row>
                    <Col span="24">
                    <Form-item label="name" prop="name" style="width: 90%">
                        <Input v-model="formItems.name" :maxlength="100" :disabled="disableInput"></Input>
                    </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                    <Form-item label="age" prop="age" style="width: 90%">
                        <Input v-model="formItems.age" :maxlength="100" :disabled="disableInput"></Input>
                    </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                    <Form-item label="address" prop="address" style="width: 90%">
                        <Input v-model="formItems.address" :maxlength="20" :disabled="disableInput"></Input>
                    </Form-item>
                    </Col>
                </Row>

            </Form>
            <div slot="footer">
                <Button type="default" @click="cancel">取消</Button>
                <Button type="primary" @click="save" :loading="loading">保存</Button>
            </div>
        </Modal>

    </div>
</template>

<script>
    import constants from '@/constants/constants.js'
    import requestUtils from '@/request/requestUtils.js'

    export default {
        data () {
            return {
                formItems: {
                    name: '',
                    age: 0,
                    address: ''
                },
                formRules: constants.rules.user.add,
                showModal: false,
                loading: false,
                disableInput: false
            }
        },

        methods:{
            save: function () {
                this.$refs['formItems'].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    requestUtils.postSubmit(this, constants.urls.sample.user.add, this.formItems, function (data) {
                        this.$Message.success({
                            content: '新增成功',
                            duration: 3
                        })
                        this.showModal = false
                        this.$emit(constants.actions.common.refreshList)
                    })
                })
            },
            'cancel': function () {
                this.$refs['formItems'].resetFields()
                this.showModal = false
            }
        }
    }
</script>